<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="animate.min.css"/>
		<link rel="stylesheet" type="text/css" href="swiper-3.3.1.min.css"/>
		<script type="text/javascript" src="swiper.animate1.0.2.min.js"></script>
		<script type="text/javascript" src="swiper-3.3.1.min.js"></script>
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
		<style type="text/css">
			*{margin: 0;padding: 0;font-family:"Microsoft YaHei";}
			.swiper-container{
				width:100vw;height:100vh;
			}
			#music{
				width:30px;height:30px;background:url(images/music.png)no-repeat;position:fixed;display: block;
				z-index: 22;right:7%;margin-top: 7%;background-size: cover;	border-radius: 50%;
			}
			#left{
				display:block;width: 30px;height: 30px;position: fixed;z-index: 23;bottom: 4%;background: transparent;
				color:darkgray;font-weight: 900;font-size: 50px;margin-left:50% ;transform: rotate(90deg);
			}
			.slide1{
				background: url(images/bg1.jpg)no-repeat;
				background-size: cover;background-position:50% 50%;
			}
			.slide1 h2{
				text-align: center;margin-top: 30px;font-size: 50px;font-weight: normal;
			}
			.slide1 p{
				text-align: center;margin-top: 20px;font-size: 20px;
			}
			.slide1 img{
				margin: 0 auto;display: block;margin-top: 20px;
			}
			.slide2{
				background: url(images/bg2.jpg)no-repeat;
				background-size: cover;background-position:50% 50%;
			}
			.slide2 h2{
				color: white;font-size: 30px;font-weight: normal;text-align: center;margin-top: 100px;
			}
			.slide2 p{
				color: white;text-indent: 2em;width: 80vw;margin: 0 auto;font-size: 20px;
			} 
			.slide2 img{
				margin: 0 auto;display: block;
			}
			.slide3{
				background: url(images/bg3.jpg)no-repeat;position: relative;
				background-size: cover;background-position:50% 50%;
			}
			.slide3 .rote{
				color: white;padding-top:30%;margin: 0 auto;display: block;position: relative;width: 80%;height: 10%;
				font-size: 30px;transition: 2s;transform: rotate(20deg);
			}
			.slide3 .rote .p1{
				text-align: left;
			}
			.slide3 .rote .p2{
				text-align: right;
			}
			.slide3 img{
				margin: 0 auto;display: block;
			}
			.slide3 .p3{
				color: white;text-indent: 2em;width: 80vw;padding-top: -50vw;;margin: 0 auto;font-size: 20px;
			}
			.slide4{
				background: url(images/bg4.jpg)no-repeat;
				background-size: cover;background-position:50% 50%;
			}
			.slide4 .p4,.p5{
				color:black;font-size:30px;display: block;width: 80vw;margin: 0 auto;
			}
			.slide4 .p4{
				text-align: left;
			}
			.slide4 .p5{
				text-align: right;
			}
			.slide4 .p6{
				color: black;margin: 0 auto;width: 80vw;text-indent: 2em;margin-top: 30px;font-size: 20px;
				
			}
			.slide5{
				background: url(images/bg5.jpg)no-repeat;
				background-size: cover;background-position:50% 50%;
			}
			.slide5 .datu{
				width: 100vw;height: 100vh;position: relative;
			}
			.slide5 .datu .bigimg{
				left:-200px;position:absolute;
			}
			.slide5 .datu .mv1{
				z-index: 33;position:absolute;margin: 0 auto;display: block;padding-left: 5vw;padding-right: 5vw;margin-top: 10vh;
			}
			.slide5 .datu h2{
				color: white;font-size: 25px;margin: 0 auto;position: absolute;padding-left: 12vw;padding-right: 12vw;
				margin-top: 85vw;
			}
			.slide5 .datu p{
				color: white;font-size: 20px;position: absolute;margin-top:110vw;padding-left: 10vw;padding-right: 10vw;
				text-indent: 2em;
			}
			.slide6{
				background: url(images/bg5.jpg)no-repeat;
				background-size: cover;background-position:50% 50%;
			}
			.slide6 .lianxi{
				margin: 0 auto;width:80vw;display: block;font-size: 20px;margin-top: 10vh;text-align: center;
			}
			.slide6 .our{
				margin: 0 auto;display: block;font-size: 25px;margin-top:3vh;text-align: center;background: red;
				border-radius: 5px;color: white;padding-top: 1vh;padding-bottom: 1vh;font-weight: 400;
				width: 50vw;cursor: pointer;
			}
			.slide6 .le,.ri{
				margin: 0 auto;width: 80vw;display: block;font-size: 20px;text-align: left;
			}
			.slide6 .le1{
				padding-top: 10vh;
			}
			.slide6 img{
				margin: 0 auto;width: 50vw;display: block;
			}
			.slide6 .logo{
				margin: 0 auto;width: 30vw;display: block;
			}
		</style>
	</head>
	<body>
		<audio id="audio" src="bg.mp3" loop="loop" autoplay="autoplay"></audio>
		<div class="swiper-container">
			<span id="music"></span>
			<p id="left">&lt;</p>
			<script type="text/javascript">
				$(function(){
					function run(){
						$("#left").animate({bottom:"7%",opacity:"0"},1000,function(){
							$("#left").animate({bottom:"4%",opacity:"1"},1000);
						});
					}
					timer5=setInterval(run,2000);
				})
			</script>
			<script type="text/javascript">
			var audio=document.getElementById("audio");
				$(function(){
					var num=0;
					var c=0;
					function run(){
						num++;
						$("#music").css({transform:"rotate("+num+"deg)"});
					}
					timer1=setInterval(run,10);
					$("#music").click(function(){
						if(c==0){
						clearInterval(timer1);
					 	audio.pause();
						c=1;
						}else{
						timer1=setInterval(run,10);
						audio.play();
						c=0;
						}
					})
				})
			</script>
		    <div class="swiper-wrapper">
		        <div class="swiper-slide slide1">
		        	<h2 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">曲之有道</h2>
		        	<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s">双面2.5D曲面屏幕，精彩不止一面</p>
		        	<img class="ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="images/phone1.png" width="50%"height="50%"></img>
		        	<p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="3s">T9E双曲面屏幕闪耀登场</p>
		        </div>
		        <div class="swiper-slide slide2">
		        	<h2 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">性能与外观，为你而生</h2>
		        	<img class="ani" swiper-animate-effect="rotateInDownRight" swiper-animate-duration="1s" swiper-animate-delay="1s" src="images/phone2.png" width="90%"height="50%"></img>
		        	<p class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="2s">        T9E突破创新的优美设计风格，兼顾性能与美观，在万众瞩目中闪耀登场。玻璃与金属材质的结合缔造美妙外观。四色机身华彩飞扬。</p>
		        </div>
		        <div class="swiper-slide slide3">
		        	<div class="rote">
		        		<p class="p1">双2.5D弧面玻璃</p>
		        		<p class="p2">真正打动人的美</p>
		        	</div>
		        		<img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" src="images/phone3.png" swiper-animate-delay="0.3s" width="90%"height="50%"></img>
		        		<p class="ani p3" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">T9E用双面流畅的弧线玻璃来阐述极简的自然美学，宛如清晨的露珠骤然滴落，汇聚成莹润的机身，亦动亦静。</p>
		        	<script type="text/javascript">
		        		var rote=document.getElementsByClassName("rote")[0];
		        		function run(){
		        			rote.style.transform="rotate(-20deg)";
		        			setTimeout(function(){
		        				rote.style.transform="rotate(20deg)";
		        			},1000)
		        		}
		        		 timer=setInterval(run,2000);
		        	</script>
		        </div>
		        <div class="swiper-slide slide4">
		        	<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" src="images/phone4.png" swiper-animate-delay="0.3s" width="90%"height="50%"></img>
		        	<p class="ani p4" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="1s"> 一体纤致高金属机身</p>
		        	<p class="ani p5" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">尽享感握之美</p>
		        	<p class="ani p6" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="2s">       T9E拥有一体成型的高质金属机身，精湛工艺让钱包机身显现动人曲线，机身与屏幕达到无缝贴合。</p>
		        </div>
		        <div class="swiper-slide slide5">
		        	<div class="datu">
		        		<div class="ani mv1" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><img class="ani mv" swiper-animate-effect="rotateIn" swiper-animate-duration="1s" src="images/phone5.png" swiper-animate-delay="0.3s" width="100%"height="100%"></img></div>
		        		<img class="bigimg" src="images/datu.jpg" />
		        		<h2 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">2000万后置+500万前置</h2>
		        		<p class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="2s">T9E采用800万像素背照式传感器，F/2.2大光圈，前置摄像头诠释新自拍神器，消去讨厌的高光斑，让皮肤变得轻柔细腻。</p>
		        	</div>
		        	<script type="text/javascript">
		        		$(function(){
		        			function run(){
		        				$(".bigimg").animate({left:"-700px"},2000,function(){
		        					$(".bigimg").animate({left:"-300px"},2000);
		        				});
		        			}
		        			timertu=setInterval(run,4000);	
		        		})
		        	</script>
		        </div>
		        <div class="swiper-slide slide6">
		        	<p class="ani lianxi" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">点击按钮联系我们</p>
		        	<p class="ani our" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1s">联系我们</p>
		        	<p class="ani le le1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">深圳市爱我科技有限公司</p>
		        	<p class="ani ri" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="3s"> 营销总部咨询电话：0755-29619999-1890</p>
		        	<p class="ani le" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="4s"> 联系人：杨先生</p>
		        	<p class="ani ri" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="5s"> 亦可登陆爱我科技官网：www.szlovme.com</p>
		        	<p class="ani le" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="6s"> 爱我微信公众号：爱我手机</p>
		        	<img class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="7s" src="images/weixin.jpg"></img>
		        	<img class="ani logo" swiper-animate-effect="zoomInDown" swiper-animate-duration="1s" swiper-animate-delay="8s" src="images/logo.png"></img>
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <!--<div class="swiper-pagination"></div>-->
		    
		    <!-- 如果需要导航按钮 -->
		    <!--<div class="swiper-button-prev"></div>-->
		    <!--<div class="swiper-button-next"></div>-->
		    
		    <!-- 如果需要滚动条 -->
		    <!--<div class="swiper-scrollbar"></div>-->
		</div>
		
	</body>
		
		<script>        
		  var mySwiper = new Swiper ('.swiper-container', {
		    direction: 'vertical',
		    loop: true,
		    grabCusor:true,
		    // 如果需要分页器
//		    pagination: '.swiper-pagination',
		    
		    // 如果需要前进后退按钮
//		    nextButton: '.swiper-button-next',
//		    prevButton: '.swiper-button-prev',
		    
		    // 如果需要滚动条
//		    scrollbar: '.swiper-scrollbar',
		    
		    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
		    swiperAnimateCache(swiper); //隐藏动画元素 
		    swiperAnimate(swiper); //初始化完成开始动画
		  	}, 
		 	 onSlideChangeEnd: function(swiper){ 
		    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		 	 } 
		  })  
		  
		 </script>
</html>
